<template>
  <div class="active">
    <div class="active_top">
      最近活动
    </div>

    <div class="active_main">
      <div class="list flex start_center" v-for="(item,index) in list"  @click="toActiveDetail(item.id)">
        <div class="list_l">
          <img class='list_l_img' :src='item.img' alt=''>
        </div>
        <div class="list_r flex">
          <div class="list_r_tit">{{item.title}}</div>
          <div class="list_r_cont">{{item.desc}}...</div>
          <div class="list_r_time">{{item.addtime}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'Active',
  data () {
    return {
      list: [],
    }
  },
  beforeMount(){
    console.log(this.$route.params);
  },
  mounted() {
    this.getInfo();
    this.$root.share();
  },
  methods: {
    toActiveDetail(index) {
      this.$router.push({
        name: 'ActiveDetail',
        params: {
          id: index
        }
      })
    },
    getInfo(){
      console.log(global.api.active.listrl);
      console.log(localStorage.getItem('carWashUuid'));
      var that = this;
      axios.get(global.api.active.list,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("then");
        console.log(res);
        that.list = res.data.data;
      })
      .catch(function(res){
        console.log("catch");
        console.log(res);
      })
    },
  },
}
</script>

<style scoped>
  .active{

  }
  .active_top{
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
 /* 内容 */
  .list{
    padding: 1.4rem 0.7rem 0.7rem 0.7rem;
    border-bottom: 1px solid #B3B3B4;
  }
  .list_l{
    margin-right: 0.7rem;
    width: 27%;
    height: 5.7rem;
  }
  .list_l_img{
    width: 100%;
    height: 100%;
  }
  .list_r{
    text-align: left;
    width: 73%;
    height: 5.7rem;
    flex-direction: column;
    justify-content: space-between;
  }
  .list_r_tit{

  }
  .list_r_cont{
    font-size: 0.8rem;
    color: #888888;
  }
  .list_r_time{
    text-align: right;
    font-size: 0.85rem;
    color: #2ecc80;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_center{
    justify-content: space-between;
    align-items: center;
  }
  .start_center{
    justify-content: flex-start;
    align-items: flex-start;
  }
  .start_end{
    justify-content: flex-start;
    align-items: flex-end;
  }
</style>
